<template>

	<view class="box-nr">
		<view class="box-item">
			<view class="summary-box">
				<view class="title">打卡图片</view>
				<view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
						multiple></u-upload>
				</view>
			</view>
			<view class="foot-box">
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
			<view>
				<view v-for="(item,index) in listData" :key="index">
					<view class="img-date">
						打卡时间：{{item.punchDate}}
					</view>
					<view class="img-box">
						<view v-for="(item2,index2) in item.images" :key="index2" style="margin-right: 20rpx;">
							<u--image :showLoading="true" :src="baseUrl+'/'+item2" width="80px" height="80px"
								@click="click"></u--image>
						</view>

					</view>
				</view>
			</view>
			
		</view>
	</view>

</template>

<script>
	import {
		getPunchRecord,
		savePunch
	} from "@/api/system/index"
	import {
		uploadWork
	} from "@/api/system/user"
	import config from '@/config'
	export default {
		data() {
			return {
				tabType: 1,
				baseUrl: config.baseUrl,
				activeId: null, //活动ID
				listData: [],
				form: {
					images: null,
					activeId: null
				},
				fileList1: [

				],
				imgArr: []
			}

		},
		created() {
			var stort_ac_id = uni.getStorageSync('active_id')
			var stort_ac_title = uni.getStorageSync('active_title')
			this.activeId = stort_ac_id
			this.getPunchRecords()
			// //因为提交给后台数据库的图片路径是不带域名的
			// var obj = {
			// 	status: 'success',
			// 	message: '',
			// 	url: "https://image.doyoad.com//upload/qiniu/images/20250310/c3d659853a3f531e44906872bea08c2d.jpg",
			// 	image: '',
			// }
			// //然后把obj添加到fileList1中，这样图片就可以回显出来了
			// this.fileList1.push(obj)


		},
		onShow() {



		},
		methods: {
			getPunchRecords() {
				var param = {
					activeId: this.activeId,
				}
				getPunchRecord(param).then(res => {
					if (res.code === 0) {
						this.listData = res.data
					}

				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.imgArr.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {

				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					console.log("wwww>>>", result)
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result.url,
						})
					);
					this.imgArr.push(result.path)
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uploadWork({
						'filePath': url
					}).then(res => {
						setTimeout(() => {
							resolve(res.data);
						}, 1000);
					})
				});
			},
			submit() {
				//活动ID
				this.form.activeId = this.activeId
				//判断总结图片是否存在，存在转换为字符串连接
				if (this.imgArr.length > 0) {
					this.form.images = this.imgArr.join(",")
				}
				var param = Object.assign({}, this.form)
				savePunch(param).then(res => {
					if (res.code === 0) {
						uni.$u.toast('打卡成功')
						this.getPunchRecords()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #c;
	}

	.box {

		.box-nr {
			background-color: #fff;

			.box-tab {
				width: 95%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;

				.tab-item {
					padding: 20rpx;
					width: 50%;
					border: 1px solid #ccc;
					text-align: center;
					background-color: #fff;
				}

				.bg-blue {
					background-color: #3764F9 !important;
				}
			}

			.box-item {
				width: 90%;
				margin: 0 auto;
				padding: 30rpx 0rpx;
			}
		}

		.summary-box {
			.title {
				padding: 10px 0rpx;
			}
		}

		.foot-box {
			margin-top: 30rpx;
		}
	}

	.img-date {
		padding: 10rpx 0rpx;
	}

	.img-box {
		display: flex;
		flex-wrap: wrap;

	}
</style>